<template>
	<view class="dynamicPage">
		<uni-nav-bar fixed statusBar :border="false" @clickLeft="clickLeft" @clickRight="clickRight">
			<view class="headers">
				<view :class="tabBarIndex === index ? 'changTabStyle':''" v-for="(item,index) in tabBars" :key="index" @tap="changTab(index)">{{item.name}}</view>
			</view>
			<view slot="right" class="headersRight iconfont icon-bi"></view>
		</uni-nav-bar>

		<swiper :current="tabBarIndex" @change="onChangeTab" class="swiper" :duration="150" :style="'height:' + scrollH">
			<swiper-item>
				<scroll-view scroll-y class="swiperView" :style="'height:' + scrollH">
					金澳国内国内
					<!-- <block v-for="(item,index) in list" :key="index">
						<common-list :item="item" :index="index"></common-list>
						<divider></divider>
					</block> -->
				</scroll-view>
			</swiper-item>

			<!-- 话题 -->
			<swiper-item>
				<scroll-view scroll-y class="swiperView" :style="'height:' + scrollH">
					<!-- 热门分类 -->
					<hot-cate :hotCate="hotCate" />
					<!-- 搜索 -->
					<view class="sousuo" @tap="openSearch">
						<text class="iconfont icon-sousuo2"></text>搜索话题
					</view>
					<!-- 轮播图 -->
					<swiper class="rotationChart" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
						<swiper-item class="rotationChartItem" v-for="(item,index) in rotationChartImage" :key="index">
							<image class="rotationChartImage" :src="item"></image>
						</swiper-item>
					</swiper>

					<view class="latelyMore">最近更多</view>
					<!-- 最近更新 -->
					<block v-for="(item,index) in topicLists" :key="index">
						<topic-list :item="item" :index="index" @open="open(item)" />
					</block>
				</scroll-view>
			</swiper-item>
		</swiper>

	</view>
</template>

<script>
	import uniNavBar from "@/components/uni-nav-bar/uni-nav-bar.vue";
	import commonList from "@/components/common/common-list.vue";
	import hotCate from "@/components/dynamic/hot-cate.vue";
	import topicList from "@/components/dynamic/topic-list.vue";
	export default {
		components: {
			uniNavBar,
			commonList,
			hotCate,
			topicList
		},
		data() {
			return {
				tabBarIndex: 0,
				tabBars: [{
					name: "关注"
				}, {
					name: "话题"
				}],

				// 获取滚动区域的高度
				scrollH: 500,

				// 遍历列表
				list: [],

				// 热门分类更多的内容
				hotCate: [{
					name: "关注"
				}, {
					name: "推荐"
				}, {
					name: "体育"
				}, {
					name: "热点"
				}, {
					name: "财经"
				}, {
					name: "娱乐"
				}],

				// 轮播图片
				rotationChartImage: ["https://picsum.photos/800/350?random=6", "https://picsum.photos/750/350?random=2",
					"https://picsum.photos/730/350?random=4"
				],

				topicLists: [{
					cover: "https://picsum.photos/180/180?random=1",
					title: "#话题名称#",
					desc: "话题描述",
					today_count: 10,
					news_count: 20,
				}, {
					cover: "https://picsum.photos/180/180?random=2",
					title: "#话题名称#",
					desc: "话题描述",
					today_count: 40,
					news_count: 60,
				}, {
					cover: "https://picsum.photos/180/180?random=3",
					title: "#话题名称#",
					desc: "话题描述",
					today_count: 5,
					news_count: 4,
				}, {
					cover: "https://picsum.photos/180/180?random=4",
					title: "#话题名称#",
					desc: "话题描述",
					today_count: 3,
					news_count: 7,
				}, {
					cover: "https://picsum.photos/180/180?random=5",
					title: "#话题名称#",
					desc: "话题描述",
					today_count: 0,
					news_count: 0,
				}],

			};
		},
		onLoad() {
			uni.getSystemInfo({
				// windowHeight 可视区域的高度(除去底部tab栏)
				// statusBarHeight 状态栏的高度
				// 导航栏的高度 44px
				success: res => {
					//获取顶部栏的高度并将px转为rpx
					this.scrollH = `${res.windowHeight - res.statusBarHeight - 44}px`;
				}
			})
		},
		methods: {
			clickLeft(e) {
				console.log(e);
			},
			clickRight(e) {
				uni.navigateTo({
					url: "../../addinput/addinput"
				})
			},
			// 点击切换选项卡
			changTab(index) {
				this.tabBarIndex = index;
			},
			// 滑动切换选项卡
			onChangeTab(e) {
				this.tabBarIndex = e.detail.current;
			},
			// 点击列表项条跳转到详情页面
			open(item) {
				uni.navigateTo({
					url: `../../topicdetail/topicdetail?detail=${JSON.stringify(item)}`
				});
			},
			//点击打开搜索页面
			openSearch() {
				uni.navigateTo({
					url: `../../search/search?type=dynamic`
				})
			},
		}
	}
</script>

<style lang="scss">
	.headers {
		width: 100%;
		@include flexCenterCenter;

		>view {
			color: #A19A9C;

			&:first-of-type {
				margin-right: 20rpx;
			}
		}

		.changTabStyle {
			font-weight: bolder;
			color: #FF4A6A;
		}
	}

	.headersRight {
		width: 100%;
		text-align: center;
	}

	// 搜索的样式
	.sousuo {
		margin: 45rpx 20rpx;
		background-color: #FBF8FD;
		border-radius: 8rpx;
		@include flexCenterCenter;
		height: 80rpx;
		color: #7E7D82;

		>text {
			margin-right: 10rpx;
			font-size: 1.07rem;
		}
	}

	// 轮播图
	.rotationChart {
		width: 710rpx;
		height: 300rpx;
		margin: auto;
		border-radius: 10rpx;
		overflow: hidden;

		.rotationChartItem {
			width: 100%;
			height: 100%;

			.rotationChartImage {
				height: 100%;
				width: 100%;
			}
		}
	}

	// 最近更多
	.latelyMore {
		margin: 30rpx 20rpx 0 20rpx;
		font-size: 1.12rem;
	}
</style>
